window.onload=function(){
    //left
    var oWhite = document.querySelectorAll('.left ul li a');
    var oCode = document.querySelector('.code');
    for(var i = 0; i < oWhite.length; i++){
        oWhite[i].index = i;
        oWhite[i].onmouseenter = function(){
            if(this.index == 10){
                oCode.style.display = "block";
            }
            for(var j = 0; j < oWhite.length; j++){
                oWhite[j].style.color = "";
            }
            oWhite[this.index].style.color = "#fff";
        }
        oWhite[i].onmouseleave = function(){
            oWhite[this.index].style.color = ""
        }
        oWhite[10].onmouseleave = function(){
            oCode.style.display = "none";
            this.style.color = "";
        }
    }
    oCode.onmouseleave = function(){
        oCode.style.display = "none";
    }
    //right
    var oRight_li=document.querySelectorAll('.right ul li');
    var oRight_a = document.querySelectorAll('.right ul li a');
    for(var i=0;i<oRight_li.length;i++){
        oRight_li[i].index=i;
        oRight_li[i].onmouseenter=function(){
            for(var j=0;j<oRight_li.length;j++){
                oRight_a[j].style.color="";
            }
            oRight_a[this.index].style.color="#fff";
        }
        oRight_li[i].onmouseleave=function(){
            oRight_a[this.index].style.color="";
        }
    }
    //注册
    var oReg = document.querySelectorAll('.right a');
    var oModal_agree = document.querySelector('.modal_agree');
    var oModal_backdrop = document.querySelector('.modal_backdrop');
    var oClose = document.querySelector('.modal_agree i');
    var oDisagree = document.getElementById('disagree');
    var oAgreeall = document.getElementById('agreeall')
    for(var i = 0; i < oReg.length; i++){
        oReg[i].index = i;
        oReg[1].onclick = function(){
            oModal_agree.style.display = "block";
            oModal_backdrop.style.display = "block";
        }
    }
    oClose.onmouseenter = function(){
        oClose.style.color = "#fff";
        oClose.style.background = "darkred";
    }
    oClose.onmouseleave = function(){
        oClose.style.color = "";
        oClose.style.background = "";
    }
    oClose.onmouseup = function(){
        oModal_agree.style.display = "none";
        oModal_backdrop.style.display = "none";
    }
    oDisagree.onmouseenter = function(){
        oDisagree.style.background = "#666";
        oDisagree.style.color = "#fff";
    }
    oDisagree.onmouseleave = function(){
        oDisagree.style.background = "";
        oDisagree.style.color = "";
    }
    oDisagree.onmouseup = function(){
        oModal_agree.style.display = "none";
        oModal_backdrop.style.display = "none";
    }
    oAgreeall.onmouseenter = function(){
        oAgreeall.style.background = "orangered";
    }
    oAgreeall.onmouseleave = function(){
        oAgreeall.style.background = "";
    }
    oAgreeall.onmouseup = function(){
        window.location.href = "register.html";
    }
    //nav
    var oNav = document.querySelectorAll('.item>a');
    console.log(oNav);

    var oItemC = document.querySelectorAll('.item-children');
    console.log(oItemC);
    for(var i = 0; i < oNav.length; i++){
        oNav[i].index = i;
        oItemC[i].index = i;
        oNav[i].onmouseenter = function(){
            for(var j = 0; j < oNav.length; j++){
                oNav[j].style.color = "";
                oItemC[j].style.display = "none";
            }
            oNav[this.index].style.color = "#f56600";
            oItemC[this.index].style.display = "block";
        }
        oNav[i].onmouseleave = function(){
            oNav[this.index].style.color = "";
            oItemC[this.index].style.display = "none";
        }
    }
    for(var i = 0; i < oItemC.length; i++){
        oItemC[i].index = i;
        oItemC[i].onmouseenter = function(){
            for(var j = 0; j < oNav.length; j++){
                oItemC[j].style.display = "none";
            }
            oNav[this.index].style.color = "#f56600";
            oItemC[this.index].style.display = "block";
        }
        oItemC[i].onmouseleave = function(){
            oItemC[this.index].style.display = "none";
            oNav[this.index].style.color = "";
        }
    }
    //搜索
    var oSearch = document.querySelector('.search');
    var oSearch_btn = document.querySelector('.icon-search');
    oSearch.onmouseenter = function(){
        oSearch.style.background = "#f56600";
        oSearch_btn.style.borderColor = "#f56600";
    }
    oSearch.onmouseleave = function(){
        oSearch.style.background = "";
        oSearch_btn.style.borderColor = "";
    }
    //分类
    var oClass = document.querySelectorAll('.class_bar>ul>li>span');
    var oClass_children = document.querySelectorAll('.class_children');
    var oUl = document.querySelectorAll('.class_children>ul');
    var num = [];
    for(var i = 0; i < oUl.length; i++){
        oUl[i].index = i;
        var count = Math.ceil(oUl[i].getElementsByTagName("li").length / 6);
        num.push(count);
    }
    for(var i = 0; i < oClass.length; i++){
        oClass[i].index = i;
        oClass_children[i].index = i;

        oClass[i].onmouseenter = function(){
            for(var j = 0; j < oClass.length; j++){
                oClass[j].style.background = "";
            }
            oClass[this.index].style.background = "#f56600";
            oClass_children[this.index].style.width = `${num[this.index] * 247}px`;
            oClass_children[this.index].style.display = "block";
        }
        oClass[i].onmouseleave = function(){
            oClass[this.index].style.background = "";
            oClass_children[this.index].style.display = "none";
        }
        oClass_children[i].onmouseenter = function(){
            oClass_children[this.index].style.display = "block";
        }
        oClass_children[i].onmouseleave = function(){
            oClass_children[this.index].style.display = "none";
            oClass_home.style.display="none";
        }
    }
    var oClass_item=document.querySelector('.class_item');
    var oClass_item_a=document.querySelector('.class_item a');
    var oClass_home=document.querySelector('.class_home');
    oClass_item.onmouseenter=function(){
        oClass_home.style.display="block";
        oClass_item_a.style.color="#f56600";
    }
    oClass_item.onmouseleave=function(){
        oClass_home.style.display="none";
        oClass_item_a.style.color="";
    }
    oClass_home.onmouseenter=function(){
        oClass_home.style.display="block";
    }
    oClass_home.onmouseleave=function(){
        oClass_home.style.display="none";
    }
};